<!DOCTYPE html>
<html>
  <head>
    <title>注册风流</title>
    <meta charset="utf-8">
   
   <style>
            body { background:#daf1fd;
}
          
            
            .bg{
                position: left;
              
                width:225px;
              	list-style:none;
               	display:block;
               	white-space:nowrap;
                }
            .zb{color:black;
                font-family: 宋体;
                float:right;
             
                border-radius: 1px;
             	  list-style:none;
            	  border:1px solid #def2ff;
                border-radius: 10px;
          		  display:inline;
         		    background:#abd2ec;
         		    white-space:nowrap;
                }
           	#center{
           		width :300px;
           		background:#abd2ec;
           		height:400px;
           		border:2px solid grey;
             	border-radius: 20px;  
           		text-align:center;
            	
              position:absolute;  
             	top:50%;  
               	left:50%;  
 				      -webkit-transform:translate(-50%,-50%);  
  				    -moz-transform:？(-50%,-50%);  
  				    transform:？(-50%,-50%);  /*以上6行代码让主框架居中*/
	            white-space:auto;
        		   }
           	.w-after{
           		  float:left;
                font-size: 45px;
                display:block;
                line-height:0px;
                color:#0f88eb;
                    }	
            
        
            input{
            	width:200px; 
                    }  
            .wbk{ 
                background-color:#f7fafc;
             	height: 30px;
             
                }
            p   {
            	font-size:30px;
               	margin-bottom: 0px;}

            .botton{ 
            	border:10px solid #0f88eb;
               	background-color:#0f88eb;
               	border-radius: 10px;
               	line-height:50px;
               	font-size:20px;
                cursor:pointer;
                 width:50px; 
                 color:#f7fafc;
                 text-decoration: none;
               }
      </style>

  </head>
  <body>
     <div class="w">
        <ul >
        <li class="zb"><u>关于我们</u></li>
        <li class="zb"><u>加入风流</u></li>
        <li class="zb"><u>帮助中心</u></li>
        <li class="zb"><u>免责声明</u></li>
        <li class="zb"><u>联系我们</u></li>
      </ul>
     </div>
    <div id="center">
     	<p>注&nbsp;&nbsp;&nbsp;册</p><br>

<ul class="bg">
<li class="bg"><input name="name" id="name" type="text" placeholder="输入用户名" value="" class="wbk" ></li>
    

<li class="bg"><input name="email" id="email" type="email" placeholder="输入邮箱" class="wbk" ></li>
  
<li class="bg"><input id="password" type="password"  value="" placeholder="输入密码" class="wbk" ></li>

 <li class="bg"><input id="password2" type="password" value=" placeholder="确认密码" class="wbk" ></li>
        <br><br><br>
<input type="button"   onclick="test()" alt="" value="注册"></ul>

              <br>


     </div>

       <p class="w-after">风流工作室</p>

<script type="text/javascript">
 //自己编的js调了好多天还是没达到想要的效果。。这期作业先套用别人的模板。。。最近太忙了。。。有时间再自己写一份提交上来。。抱歉抱歉
        function test() {

            var name=document.getElementById("name").value;
            var a=localStorage.getItem(name);
            if(a!=null){
                alert("用户名已被使用");
                return false;
            }

            var temp=document.getElementById("email");
            var myreg=/^[a-zA-Z0-9]+@([a-zA-Z0-9]+\.)+com$/;
            if(!myreg.test(temp.value)) {
                alert("邮箱格式不正确");
                myreg.focus();
                return false;
            }

            var tem=document.getElementById("email").value;
            var b=localStorage.getItem(tem);
            if(b!=null){
                alert("邮箱已被使用");
                return false;
            }

            var password=document.getElementById("password");
            var p1=/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{8,16}$/;
            if (!p1.test(password.value)){
                alert("密码必须包含字母和数字且长度为8-16位");

                return false;
            }
            var pass=document.getElementById("password").value;
            var password2=document.getElementById("password2").value;
            if (pass!=password2){
                alert("请确认两次密码输入一致");
                return false;
            }
            else {
                var data=new Object;
                data.name=document.getElementById("name").value;
                data.password=document.getElementById("password").value;
                data.email=document.getElementById("email").value;
                var t=new Date();
                data.timenow=t.toLocaleString();
                var ti=JSON.stringify(data);
                localStorage.setItem(data.name,ti);
                alert("注册成功");
                window.location.href = 'http://indianxiaohao.gitee.io/ugi/fengliu.html';
            }
        }
</script>
      </script>
 

  </body>

</html>